<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-US" xmlns="http://www.w3.org/1999/html">
  <head>
    <title>搜藏</title>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<link rel="stylesheet" type="text/css" href="styles.css">

	  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	  <script src="https://unpkg.com/axios/dist/axios.js"></script>

	<script>
	function add(){
		window.open ('favEdit.html', 'newwindow',
		'height=300, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
	}
	</script>
  </head>
  <body>

    <form name="favForm" method="post" action="/cang/fav.do;jsessionid=FF8C0487A99814B144B07E5633524A0F"  >
      <input type="hidden" name="op" value="toList" />
    
    <div class="banner" valign="top">
    	 搜藏
    </div>
		<table id="app" cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td style="text-align:right;" valign="top">
					<!-- 左边Tag列表 -->
					<div class="left_labels" >
						<table class="labels_table" cellspacing="0" cellpadding="0" border="0">
							<tr><td><a href="#" onclick="add();" style="font-weight:bold;">添加书签</a></td></tr>
							<tr>
								<td :class="{selected_label : selected == 'all'}">
									<a href="#" @click.prevent="showAll()">全部</a>
								</td>
							</tr>
							<tr>
								<td :class="{selected_label : selected == 'noTags'}">
									<a href="#" @click.prevent="showNoTags()">未分类</a>
								</td>
							</tr>
							<tr v-for="t in tagList">
								<td :class="{selected_label : selected == t.tid}">
									<a href="#" @click.prevent="showFov(t)">{{t.tname}}</a>
								</td>
							</tr>
							<tr>
								<td>
									<a style="font-weight:bold;" href="#" @click.prevent="yunTu">云图</a>
								</td>
							</tr>
						</table>
					</div>
				</td>
				<td>
					<!-- 右边fav内容 -->
						<div class="content_links">
							<div v-if="selected == null">
								<label v-for="t in tagList" style="margin: 10px; color: black;"
								:style="{fontSize: 14 + t.tcount + 'px',fontWeight: 300 + t.tcount * 100}">
									{{t.tname}}
								</label>
							</div>

						<div v-if="selected != null" v-for="f in clickTag.fList" style="padding: 6px 10px">
							<div>
								<a :href="'http://'+ f.furl"
									style="color:blue;font-size:18px;"
									target="_blank">
									{{f.flable}}
								</a>
							</div>
							<div style="color:black;font-size:16px;">
								{{f.fdesc}}
							</div>
							<div style="color:green;font-size:14px;">
								http://{{f.furl}}
							</div>
						</div>

						</div>
				</td>
			</tr>
		</table>
    </form>

	<script type="text/javascript">
		var v = new Vue({
			el :"#app",
			data : {
				tagList : [],
				clickTag : {fList:[]},
				selected : 'all'
			},
			created(){
				axios.get("allTag.s").then(res=>{
					this.tagList = res.data;
					this.showAll();
				});
			},
			methods:{
				showFov(tag){
					this.selected = tag.tid;
					this.clickTag = tag;
				},
				showAll() {
					this.selected = 'all';
					for(tag of this.tagList) {
						a : for(fov of tag.fList){
							for(fov1 of this.clickTag.fList){
								// 如果已经在数组，则跳过
								if(fov1.fid == fov.fid){
									// 命名循环
									continue a;
								}
							}
							this.clickTag.fList.push(fov);
						}
					}
				},
				showNoTags() {
					this.selected = 'noTags';
					this.clickTag = {fList:[]};
					for(tag of this.tagList){
						a : for(fov of tag.fList){
							if(fov1.fid == fov.fid){
								continue a;
							}
							if(!fov.ftags){
								this.clickTag.fList.push(fov);
							}
						}
					}
				},
				yunTu() {
					this.selected = null;
				}
			}
		})
	</script>
  </body>
</html>